<style>
    *{
        font-family: 微软雅黑;
    }
    .head_bg img{
        margin: 0 auto;
        display: block;
        width: 100%;
        height: auto;
        background-size: 100% 100%;
    }
    .head_title{
        text-align: center;
        font-size: 18px;
        margin-top: 20px;
        color:#000000;

    }
    .head_intro{
        text-align: center;
        margin-top: 10px;
    }
    .time{
        color: #d8b37e;
        margin-left: 10px;
        /*font-size: 18px;*/
        margin-top: 3px;
    }
    .intro{
        margin-top: 20px;
        text-indent: 25px;
        line-height: 30px;
    }
</style>
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="head_bg fileImgs1"><input type="file" name='img4'><img style="width: 100%;height: 500px;background-size: 100% 100%" src="images/photos/media6.png" th:src="@{/images/photos/media6.png}" ></div>
                <div class="head_title">标题</div>
                <div class="head_intro">紫禁城建筑艺术展</div>
                <hr/>
                <div class=""><img src="../screen/images/time1.png" th:src="@{/images/time1.png}" width="23px" height="23px"><span class="time">2018-08-16</span></div>
                <div class="" style="margin-top: 10px"><img src="../screen/images/map1.png" th:src="@{/images/map1.png}" width="23px" height="23px"><span class="time">东华门，东南角落</span></div>
                <div class="intro">介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍
                    介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</div>
                <div class="slide"><img style="display: block;margin: 0 auto" width="40px" height="25px" src="../screen/images/slide.png" th:src="@{/images/slide.png}"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a href="" class="panel-close">×</a>
                    <a href="" class="minimize">−</a>
                </div>
                <h4 class="panel-title">展览 作品</h4>
            </div>
            <div class="panel-body">
                <div class="col-md-6 "><input type="file" name='img4'><img src="images/photos/media1.jpg" th:src="@{/images/photos/media1.jpg}" style="width: 100%;height: 230px;display: block;background-size: 100% 100%" alt="">
                    <span style="display: block;text-align: center;margin-top: 10px">tu1</span>
                </div>
                <div class="col-md-6 "><input type="file" name='img4'><img src="images/photos/media2.jpg" th:src="@{/images/photos/media2.png}" style="width: 100%;height: 230px;display: block;background-size: 100% 100%" alt="">
                    <span style="display: block;text-align: center;margin-top: 10px">tu2</span>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a href="" class="panel-close">×</a>
                    <a href="" class="minimize">−</a>
                </div>
                <h4 class="panel-title">展览 全景</h4>
            </div>
            <div class="panel-body">
                <div class="col-md-12 fileImgs1"><input type="file" name='img4'><img src="images/photos/media1.jpg" th:src="@{/images/photos/media1.jpg}" style="width: 100%;height: 350px;display: block;background-size: 100% 100%" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        $(".slide").click(function () {
            $(".intro").slideToggle(function () {
//                $(this).css("height","500px")
            })
        })
    })
    $(function() {

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        //获取点击的图片元素
        var cdimg  = $('.fileImgs1').children('img');
        //获取上传图片的 input 标签元素
        var cdfile = $('.fileImgs1').children('input[type="file"]');
        //设置input 大小和图片一致
        cdfile.css({'width':cdimg.css('width'),'height':cdimg.css('height')});
        //input透明度为0,定位，优先级比图片高
        cdfile.css({'opacity':0,'position':'absolute','z-index':10,'overflow':'hidden'});
        //判断input的图片文件改变则img的图片也替换为input选择的图片
        cdfile.change(function() {
            if (this.files && this.files[0]) {
                var objUrl = getObjectURL(this.files[0]);
                if (objUrl) {
                    $(this).siblings('img').attr("src", objUrl);
                }
            }
        });
    })

    /*]]>*/
</script>